<template>
  <div style="position: fixed;width: 100%">
    <div>
      <!-- 导航栏 -->
      <van-nav-bar style="background-color: Crimson;">
        <template #title>
          <span style="font-size: 18px; color: white">打赏</span>
        </template>
        <template #left>
          <van-icon @click="onBack" name="arrow-left" size="20px" color="white" style="font-weight: bold;width: 20px"/>
        </template>
        <van-icon name="star-o" size="20px" color="gray" style="font-weight: bold"/>
      </van-nav-bar>
      <!-- 用户信息 -->
      <div style="padding-top: 20px;background-color: Crimson;">
        <van-image width="70px" height="70px" fit="cover" round src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586624938388&di=f7f89a0379532216ee948308bce0c783&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F64%2F76%2F20300001349415131407760417677.jpg"></van-image>
        <div style="font-size: 16px;font-weight: bold;color: white">魏大爷</div>
        <div style="font-size: 12px;font-weight: bold;color: white;padding: 10px 0">客官，赏我二两酒钱吧~</div>
      </div>
    </div>
    <!-- 金额信息 -->
    <div class="moneyWrapper">
      <div class="money" :style="moneyStyle(idx)" v-for="(v,idx) in moneyList" :key="idx" @click="onChoseMoney(idx)">{{v}}元</div>
      <div class="money" @click="onInputMoney" :style="inputShow?'background-color: Crimson;color: white;':''">看着给</div>
    </div>
    <van-field v-if="inputShow" size="large" v-model="inputMoney" type="digit" label="打赏金额:" />
    <van-button color="Crimson" style="margin-top: 20px" @click="onReward">确认打赏</van-button>
  </div>
</template>

<script>
export default {
  name: 'Reward',
  data () {
    return {
      selectIdx: -1,
      moneyList: [1, 2, 5, 10, 15],
      inputMoney: 50,
      inputShow: false
    }
  },
  methods: {
    // 返回
    onBack () {
      this.$router.back()
    },
    // 获取样式
    moneyStyle (idx) {
      if (this.selectIdx === idx) {
        return 'background-color: Crimson;color: white;'
      } else {
        return ''
      }
    },
    // 金额选择
    onChoseMoney (idx) {
      this.inputShow = false
      this.selectIdx = idx
    },
    // 自定义金额
    onInputMoney () {
      this.selectIdx = -1
      this.inputShow = true
    },
    // 确认打赏
    onReward () {
      this.$toast.success('打赏成功！\n感谢支持！')
      setTimeout(() => {
        this.$toast.clear()
        this.onBack()
      }, 1500)
    }
  },
  computed: {
    // 获取样式
    moneyStyle2 (idx) {
      if (this.selectIdx === idx) {
        return 'background-color: #FF8800;'
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped>
.moneyWrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 10px 0px 10px;
}
.money{
  font-size: 20px;
  font-weight: bold;
  color: Crimson;
  width: 30%;
  height: 60px;
  /*border-color: Crimson;*/
  /*border-width: 2px;*/
  border: 1px red solid;
  text-align: center;
  line-height: 60px;
  margin-bottom: 20px;
  border-radius: 10px;
}
</style>
